<script setup lang="ts">
// import { ref } from 'vue'
import MyGenericModal from "@/components/MyGenericModal.vue";
import { useTemplateRef } from "vue"; // 引入 useTemplateRef
import type { ComponentExposed } from "vue-component-type-helpers";

// 使用 useTemplateRef 替代普通 ref
const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal<string>>>("modal");

const showModal = ref(false);
const aaa = ref("fff");
const modalContent = ref("初始内容");

// 打开模态框（通过 ref 方法）
const openModal = () => {
  modal.value?.open("这是通过open方法传入的新内容"); // 安全调用
};

const handleConfirm = (content: string | null) => {
  console.log("确认内容:", content);
  modalContent.value = content || "";
};

const handleCancel = () => {
  console.log("模态框已取消");
};
</script>

<template>
  <div class="app-container">
    <h1>{{ aaa }}Vue 3 泛型模态框示例（useTemplateRef优化）</h1>

    <button @click="showModal = true">通过v-model打开</button>
    <button @click="openModal">通过ref方法打开</button>

    <p>当前内容: {{ modalContent }}</p>

    <!-- 绑定 useTemplateRef -->
    <MyGenericModal ref="modal" v-model="showModal" title="自定义标题" @confirm="handleConfirm" @cancel="handleCancel">
      <!-- 插槽内容保持不变 -->
    </MyGenericModal>
  </div>
</template>

<style>
/* 样式保持不变 */
</style>
